<script setup>
import { ref, reactive, toRef, onMounted } from "vue";
import {postCustomizedList,postCustomizedSave,postCustomizedDel,postClientCustomizedUpdstatus} from '@/api'
import { toRaw } from '@vue/reactivity'

const aothList = ref([])
const total = ref(0)
const page = ref(1)
const handleCurrentChange = (val)=>{
    page.value = val
    postCustomizedList({
        page:val,size:10
    }).then((res) => {
    // console.log(res.data)
        total.value = res.data.count
	    aothList.value = res.data.item
	// console.log(aothList)
    })
} 
postCustomizedList({
    page:1,size:10
}).then((res) => {
    console.log('asdasd')
    // console.log(res.data)
    total.value = res.data.count
	aothList.value = res.data.item
	// console.log(aothList)
})
const form = reactive({
    name: '',
    radio1: 3,
    selectList: [
        { id: "1", isShow: true, value: '' }

    ]
})
const dialogVisible = ref(false)

const stateChanged = async(a) => {
    
    const r = await postClientCustomizedUpdstatus({id:a.id,status:a.status?1:0})
}
const addInput = () => {
    form.selectList.push({ id: '', isShow: true })
}
const deleteInput = (index) => {
    form.selectList.splice(index, 1)
}
const determine = async()=>{
    if(itemid.value == false){
         // console.log(form.name,'确定')y
        console.log(form.selectList,'fdgfdgfdg')
        let content = []
        let arr = toRaw(form.selectList)
        arr.forEach(item=>{
            content.push(item.value)
        })
        await postCustomizedSave({
            name:form.name,
            attr:form.radio1,
            content:content
        })
        handleCurrentChange(1)
        dialogVisible.value = false
    }else{
         // console.log(form.name,'确定')y
        console.log(form.selectList,'fdgfdgfdg')
        let content = []
        let arr = toRaw(form.selectList)
        arr.forEach(item=>{
            content.push(item.value)
        })
        await postCustomizedSave({
            name:form.name,
            attr:form.radio1,
            content:content,
            id:itemid.value
        })
        handleCurrentChange(1)
        dialogVisible.value = false
    }
   
}
const itemid=ref()
//编辑文档内容
const editGo =(item)=>{
    itemid.value=item.id
    console.log(item)
    form.name=item.name
    form.radio1=item.attr
    if(item.attr == 2){
        form.selectList=[]
    for(var i =0;i<item.content.length;i++){
        var data ={
            value:item.content[i],
            isShow: true,
            id:''
        }
        form.selectList.push(data)
    }
    }
    console.log('asaaaaaaaaaaaaaa')
   
    dialogVisible.value = true
    // 如果是修改 item 的话应该是 tableData[index] = item
    // 如果是修改整体的话应该用 ref 定义 tableData，用 tableData.value = item 修改
    // tableData=item
    // let row = {
    //     isEdit : false,
    //     isAdd : true
    //   }
    //   aothList.value.push(row)
}
// 上移
const moveUpward = (row, index) => {
    console.log(index)
    if (index > 0) {
        let upData = aothList.value[index - 1];
        aothList.value.splice(index - 1, 1);
        aothList.value.splice(index, 0, upData);
    }

}
// 下移
const moveDown = (row, index) => {
    if ((index + 1) == aothList.length) {
        console.log(删除行);
        $message({
            message: '已经是最后一条，下移失败',
            type: 'warning'
        });
    } else {
        let downData = aothList.value[index + 1];
        aothList.value.splice(index + 1, 1);
        aothList.value.splice(index, 0, downData);
    }
}
// 删除
const deleteItem = (val) => {
    // console.log("delete");
    // aothList.value.splice(index, 1)
    postCustomizedDel({id:val}).then(res=>{
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        handleCurrentChange(1)
    })
}
// const tableData = reactive([
//     {
//         id: 1,
//         name: '',
//         type: '',
//         attribute: '',
//         status: 1,
//         operation: ''
//     }
// ])
const value1 = ref(true)
const adddialogVisible=()=>{
    itemid.value=false
    form.name=''
    form.radio1=3
    form.selectList=[{ id: "1", isShow: true, value: '' }]
    dialogVisible.value=true
}
</script>
<template>
    <div style="margin: 20px;">
        <div>
            <el-button type="primary" @click="adddialogVisible">新增自定义字段</el-button>
        </div>
        <div class="CIStyle">
            <div class="CIStyleChild">
                <div class="tableStyle">
                    <el-table :data="aothList" style="width: 100%" 
                    :header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
			        :cell-style="{ fontSize: '14px', padding: '20px 0' }">
                        <el-table-column prop="name" label="字段名称" />
                        <el-table-column  label="字段类型">
                            <template v-slot="scope">
                                <span v-show="scope.row.type==1">基础字段</span>
                                <span v-show="scope.row.type==2">自定义字段</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段属性" >
                            <template v-slot="scope">
                                <span v-show="scope.row.attr==1">文本</span>
                                <span v-show="scope.row.attr==2">选择</span>
                                <span v-show="scope.row.attr==3">时间</span>
                                <span v-show="scope.row.attr==null">--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="是否显示">
                            <template v-slot="scope">
                                <el-switch v-model="value1" v-show="scope.row.type==2" disabled active-text="显示" />
                                <span v-show="scope.row.type==1">
                                    <el-switch :active-value="1"  :inactive-value="0"  :active-text="scope.row.status==1 ? '显示' : '隐藏'" v-model="scope.row.status"
                                    @change="stateChanged(scope.row)" />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="operation" label="操作" :header-align="right" width="220">
                            <template v-slot="scope">
                                <el-button link type="primary" :disabled="scope.$index == 0"
                                    @click="moveUpward(scope.row, scope.$index)">上移<span
                                        style="color: #ebebeb; margin-left: 30%;">|</span></el-button>
                                <el-button link type="primary" :disabled="(scope.$index + 1) == aothList.length"
                                     @click="moveDown(scope.row, scope.$index)">下移<span

                                        style="color: #ebebeb; margin-left: 30%;">|</span></el-button>
                                       
                                            <el-button link type="primary" :disabled="scope.row.type != 2" @click="editGo(scope.row)">编辑<span
                                            style="color: #ebebeb; margin-left: 30%;">|</span></el-button>
                                       
                                        
                                        <el-button link type="primary" :disabled="scope.row.type != 2"
                                            @click="deleteItem( scope.row.id)" 
                                            >删除</el-button>
                                     
                            </template>

                        </el-table-column>
                    </el-table>
                    	<el-pagination style="margin-top:10px;margin-bottom:10px" :current-page="page" class="app-page" @current-change="handleCurrentChange" background layout="prev, pager, next"
					:total="total" />
                </div>
               
            </div>
        </div>
        <!-- 弹窗 -->
        <el-dialog v-model="dialogVisible" :title="itemid == false?'新增自定义字段':'编辑自定义字段' " center width="450px" :before-close="handleClose">
            <el-form :model="form" label-width="80px">
                <el-form-item label="字段名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="字段属性">
                    <el-radio-group v-model="form.radio1" class="ml-4" :disabled="itemid">
                        <el-radio :label="1" size="large">文本</el-radio>
                        <el-radio :label="2" size="large">选择</el-radio>
                        <el-radio :label="3" size="large">时间</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="form.radio1 == '2'">
                    <div style="display: flex;" class="content-item" v-for="(item, index) in form.selectList"
                        :key="index">
                        <span>
                            <el-input v-model="item.value" autocomplete="off"
                                :style="{ 'width': form.selectList.length !== 1 ? '290px' : '320px', 'margin-bottom': form.selectList.length !== 1 ? '10px' : '' }"
                                show-word-limit maxlength="15" />
                        </span>
                        <span style="" v-if="form.selectList.length !== 1" @click="deleteInput(index)">
                            <el-icon style="margin-left: 10px">
                                <Remove />
                            </el-icon>
                        </span>
                    </div>
                </el-form-item>
                <el-form-item @click="addInput" v-if="form.radio1 == '2'">
                    <p style="display: flex;margin-top: -10px;">
                        <el-icon color="#1890ff">
                            <CirclePlus />
                        </el-icon>
                    <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
                    </p>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="determine">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style>
@import "../../../style/iconfont.css";
@import '../../../style/app-component.scss';
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.CIStyle {
    background-color: #ffffff;

    margin-top: 20px;
    border-radius: 10px;
}

.CIStyleChild {
    display: flex;
    justify-content: space-between;
}

.tableStyle {
    flex: 4;
    border: 1px solid #f1f1f1;
    margin: 20px;
}

.mobileStyle {
    flex: 1;
}

.mobileStyleChild {
    width: 300px;
    margin-top: 20px 
}
.el-page-header {
  display:none;
}
</style>